<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model='firstName'> +
        <input type="text" v-model='lastName'> =
        <input type="text" v-model='fullName'>
    </div>
</body>
<script>


    var vm = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        methods: {},
        computed: {
            // 在computed中可以定义一些属性，这些属性叫做【计算属性】，计算属性本质就是一个方法，
            // 只不过我们在使用这些计算属性的时候，是把它们的名称直接当做属性来使用，并不会把计算属性当做方法来调用。

            // 注意:
            // 1.计算属性引用时不要加()去调用，直接当做普通属性使用即可。
            // 2.只有计算属性这个function内部任何数据发生变化就会立即重新计算这个计算属性的值。
            // 3.计算结果的求值结果会被缓存起来，方便下次调用，在依赖的任何数据没有变化则不会对计算属性重新求值。
            fullName: function () {
                console.log('计算')
                return this.firstName + '-' + this.lastName;
            }
        }
    });
</script>

</html>